<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../../yl/index.css" />
    <link rel="stylesheet" href="../../../yl/style.css" />
    <link rel="stylesheet" href="../../../style/free.css" />
    <title>调查问卷</title>
    <style>
        .el-select__wrapper {
            box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
            background-color: var(--el-fill-color-blank) !important;
        }
        .el-form-item__label {
            justify-content: flex-start;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-form inline :model="form" ref="form" style="width: 100%; height: calc(100vh - 120rem); overflow: auto;">
            <div class="m-2 rounded flex flex-column">
                <el-form-item :rules="[{ required: true, message: '请输入您的性别（单选）', trigger: 'change' }]" prop="A1"
                    class="m-2 flex flex-column">
                    <template #label>
                        <div><span class="font flex-shrink">1.您的性别（单选）:</span></div>
                    </template>
                    <el-radio-group v-model="form.A1">
                        <el-radio :label="item" v-for="(item,index) in ['男','女']" :key="index"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请输入您喜欢购买什么商品（多选）', trigger: 'change' }]" prop="A2"
                    class="m-2 flex flex-column">
                    <template #label>
                        <span class="font flex-shrink">2.您喜欢购买什么商品（多选）:</span>
                    </template>
                    <el-checkbox-group v-model="form.A2">
                        <el-checkbox :label="item" v-for="(item,index) in ['家用电器','香烟','酒水类','面包','大米','洗衣液','鸡蛋']"
                            :key="index"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请输入您的年龄（单选）', trigger: 'change' }]" prop="A3"
                    class="m-2 flex flex-column">
                    <template #label>
                        <span class="font flex-shrink">3.您的年龄（单选）:</span>
                    </template>
                    <el-radio-group v-model="form.A3">
                        <el-radio :label="item"
                            v-for="(item,index) in ['12-17','18-24','25-29','30-34','35-39','40-44','45-49','50-54','55-59','60-64','65-69','70-74','75-79']"
                            :key="index"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="A4" class="m-2 flex flex-column">
                    <template #label>
                        <span class="font flex-shrink">4.是否方便留下您的手机号（选填）:</span>
                    </template>
                    <el-input v-model="form.A4" placeholder="请输入是否方便留下您的手机号（选填）"></el-input>
                </el-form-item>
                <el-form-item prop="A5" class="m-2 flex flex-column">
                    <template #label>
                        <span class="font flex-shrink">5.对我们有什么建议:</span>
                    </template>
                    <el-input type="textarea" :autosize="{ minRows: 4}" v-model="form.A5"
                        placeholder="请输入对我们有什么建议"></el-input>
                </el-form-item>
            </div>
        </el-form>
        <div class="fixed-bottom flex justify-center w-100 bg-white shadow" style="height: 120rem; ">
            <div @click="handleSubmit" class=" m-2 bg-info rounded-circle w-100 flex justify-center align-center"
                v-cloak>
                <span class="text-white">提交表单</span>
            </div>
        </div>
    </div>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="../../../yl/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="../../../utils/jweixin.js"></script>
    <script>
        const App = {
            data() {
                return {
                    form: {
                        A2: [],
                    },
                }
            },
            beforeCreate() {
                document.title = "调查村民购物问卷";
                function setRem() {
                    const designWidth = 750; // 设计稿宽度（rpx）
                    const maxWidth = 540; // 可选：限制最大宽度（如手机端常见值）
                    const screenWidth = Math.min(window.innerWidth, maxWidth);
                    const scale = screenWidth / designWidth;
                    document.documentElement.style.fontSize = scale + 'px';
                }
                setRem();//1rem = 0.5px 对标小程序在 375px 宽的屏幕上，1rpx = 0.5px（因为 750rpx / 375px = 2）
                window.addEventListener('resize', setRem);
            },
            mounted() {
                let URL = window.location.href;
                this.form.Questionnaire_SerialNumber = getQueryObject(URL, 'nodeKey');
            },
            methods: {
                async validateAllForms() {
                    //获取当前页面上所有的Elform
                    let forms = [];
                    for (let key in this.$refs) {
                        const ref = this.$refs[key];
                        if (ref.$options && ref.$options.name == 'ElForm') {
                            forms.push(ref);
                        }
                    }
                    //判断每个Elform的校验是否通过
                    let isfail = false;
                    for (const form of forms) {
                        try {
                            await form.validate();
                        } catch (error) {
                            isfail = true;
                        }
                    }
                    if (isfail) {
                        return false;
                    }
                    return true;
                },
                async handleSubmit() {
                    const allValid = await this.validateAllForms();
                    if (allValid && !this.loading) {
                        this.loading = true;
                        let form = deepClone(this.form);
                        form.A2 = JSON.stringify(form.A2)
                        let lJSONObject_DataSet = {
                            Add: {
                                questionnaire_form1753173911747: [form]
                            }
                        }
                        this.submitSave(lJSONObject_DataSet, (res) => {
                            if (res.Status == 'success') {
                                window.history.go(-1);
                            }
                            this.loading = false;
                        })
                    }
                },
                submitSave(Data, response) {
                    const websocket = new WebSocketClient();
                    websocket.init({
                        url: ws + '/generalSave/' + getCookie('token'),
                        onopen: () => {
                            let lJSONObject_DataSet = {
                                Data, AccessToken: getCookie('token')
                            }
                            websocket.send(JSON.stringify(lJSONObject_DataSet));
                        },
                        onmessage: (data) => {
                            try {
                                const res = JSON.parse(data);
                                websocket.close();
                                if (res.REDIRECT && res.REDIRECT == 'REDIRECT') {//重定向
                                    wx.miniProgram.navigateTo({
                                        url: miniProgram,
                                    })
                                } else {
                                    response ? response(res) : null;
                                }
                            } catch (error) { }
                        },
                    })
                }
            },
        };

        const { createApp } = Vue;
        const app = createApp(App);
        //这种方式是引入全部图标，无需单个引入
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        const ElMessage = ElementPlus.ElMessage;
        app.use(ElementPlus, { locale: zhCn });
        app.mount("#app");
    </script>
</body>

</html>